<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script type="text/javascript" src="/jars/Clamp/clamp.min.js"></script>
    <script type="text/javascript" src="/jars/jquery/jquery-1.12.4.min.js"></script>
    <style type="text/css">
        .pay_explain {
            position: relative;
            line-height: 1.4em;
            height: 4.2em;
            overflow: hidden;
        }

        .pay_explain:after {
            content: "...";
            font-weight: bold;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 0 20px 1px 45px;
            background: url(http://css88.b0.upaiyun.com/css88/2014/09/ellipsis_bg.png) repeat-y;
        }

        /*#payExplain:hover{
            white-space:normal;
            height:148px;
            !*background-color:#F2F9F9;*!
            transition-property:background-color,height;
            transition-duration:0.2s ;
            transition-timing-function:linear;
        }*/
    </style>
</head>
<body>

<div style="width: 100%;height: 100%;">
    <h1 align="center">欢迎来到测试页面</h1>
    <p>Hello World</p>
    <p id="userId"></p>
    <span id="user"></span>
</div>
<div align="center" style="width: 100%;height: 100%;background: moccasin;border: 3px solid darkseagreen;">
    <h3 align="center">websoket测试</h3>
    <div align="center" style="width: 600px;height: 400px;border: 2px solid aquamarine;">
        <div style="width: 100%;height: 10%;border: 2px solid gray;">
            <span style="color: blue;size: a3;">聊天窗口</span>
        </div>
        <div id="message" style="width:100%;height:78%;color: blanchedalmond;border:solid 1px seagreen;">
            <p style="width: 100%;color: darkorange;text-align: left;"><span title="输入的内容">输入的内容-</span><span></span>
            </p>
            <p style="width: 100%;color: deepskyblue;text-align: right"><span></span><span>-接受的信息</span></p>
        </div>
        <div style="width: 100%;height: 10%;border: 2px solid saddlebrown;">
            <input type="text" name="messageText" id="messageText"/>请输入内容
            <input type="button" value="发送" onclick="sendMessages()"/></div>
    </div>

</div>
<div style="width: 700px;height: 400px ;">
    <div style="width:100%;padding: 30px">
        <p style="width:100%;">
            <span class=""
                  title="大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。WebKit浏览器或移动端的页面,在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。"
                  id="payExplain" style="width: 100%;float: left;">
                大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。WebKit浏览器或移动端的页面,在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
            </span>
            <span class="" id="payExplain1" style="width: 100%;float: left">
                大家应该都知道用text-overflow:ellipsis属性来实现单行文本的溢出显示省略号(…)。当然部分浏览器还需要加宽度width属性。WebKit浏览器或移动端的页面,在WebKit浏览器或移动端（绝大部分是WebKit内核的浏览器）的页面实现比较简单，可以直接使用WebKit的CSS扩展属性(WebKit是私有属性)-webkit-line-clamp ；注意：这是一个 不规范的属性（unsupported WebKit property），它没有出现在 CSS 规范草案中。
            </span>
        </p>
    </div>

</div>
<script type="text/javascript">
    var webSocket = null;

    $(function () {
        var header = document.getElementById('payExplain'),
            paragraph = document.getElementById('payExplain1');

        $clamp(header, {clamp: 4, useNativeClamp: false});
        //$clamp(paragraph, {clamp: 3, useNativeClamp: false});

        //判断当前浏览器是否支持WebSocket
        if ('WebSocket' in window) {
            statSocket();
        }
        else {
            alert('Not support websocket')
        }
    });
    var path = "${basePath}";
    var author = '$!{userId}';
    var p = document.getElementById("userId");
    var sp = document.getElementById("user");
    gE("userId").innerHTML = author;
    var ee = "";
    function gE(id) {
        debugger;
        return document.getElementById(id);
    }

    function statSocket() {
        webSocket = new WebSocket("ws://localhost:8080/webSocket/open");

        //连接发生错误的回调方法
        webSocket.onerror = function (event) {
            console.error("链接出现异常，请检查服务器是否正常运行");
            console.error(event);
            setMessageInnerHTML("error");
        };

        //连接成功建立的回调方法
        webSocket.onopen = function (event) {
            $("#message").append("<p style='width: 100%;text-align: center;'><span>连接成功</span></p>");
        };

        //接收到消息的回调方法
        webSocket.onmessage = function (event) {
            if (!!event.data) {
                var data = event.data;
                $("#message").append("<p style='width: 100%;color: deepskyblue;text-align: right'><span>" + data + "</span><span>-接受的信息</span></p>");
            }
        };

        //连接关闭的回调方法
        webSocket.onclose = function () {
            console.log('close run status socket');
            $("#message").append("<p style='width: 100%;color: coral;text-align: center;'><span>连接关闭</span><span></span></p>");
        };

        //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
        window.onbeforeunload = function () {
            webSocket.close();
        };


    }

    //将消息显示在网页上
    function setMessageInnerHTML(innerHTML) {
        document.getElementById('message').innerHTML += innerHTML + '<br/>';
    }

    function sendMessages() {
        var messageText = $('#messageText').val();
        $("#message").append("<p style='width: 100%;color: darkorange;text-align: left;'><span title='" + messageText + "'>输入的内容-</span><span>" + messageText + "</span></p>");
        $.post('/sendMessage', {'messageText': messageText}, function (data) {
            //alert(data.message);
        });
    }
</script>
</body>
</html>